<template>
  <div>
    <div class="showImg" >
      <h1 style="text-align: center">湘菜</h1>
      <img  @mouseover="changeInterval(true)"
            @mouseleave="changeInterval(false)"
            v-for="(item) in imgArr"
            :key="item.id"
            :src="item.url"
            alt="暂无图片"
            v-show="item.id===currentIndex"
      >
      <!--    左侧按钮-->
      <div  @click="clickIcon('up')"   class="iconDiv icon-left">
        <i class="el-icon-caret-left"> </i>
      </div>
      <!--    右侧按钮-->
      <div  @click="clickIcon('down')"  class="iconDiv icon-right">
        <i class="el-icon-caret-right"> </i>
      </div>
      <!--    控制圆点-->
      <div class="banner-circle">
        <ul>
          <li @click="changeImg(item.id)"
              v-for="(item) in imgArr"
              :key="item.id"
              :class="item.id===currentIndex? 'active': '' "
          ></li>
        </ul>
      </div>
    </div>

    <div id="box">
      <table id="sort">
        <div id="content-nav">
          <tr>
            <th width="290">美食图片</th>
            <th width="135">美食名称</th>
            <th width="650">简介</th>
            <th width="160">五星评分</th>
            <th width="100">操作</th>
          </tr>
        </div>
      <tr v-for="v in list">
        <div >
          <th><img height="300" width="300" :src="v.src"/></th>
          <th width="135">{{v.des}}</th>
          <th >{{v.introduction}}</th>
          <th v-for="(i,index) in star" :key="index" @click="clickStars(index)">
            <img :src="xing>index?stara:starb" style="width: 30px;height: 20px;"/>
          </th>
          <th><button style='background-color:rgba(142,155,158,0.96);color:white ;width: 72px'><a :href="v.url">详情</a></button></th>
        </div>
      </tr>
      </table>
    </div>
  </div>
</template>



<script>
    export default {
        name: "Xiang_Cuisine",
            data() {
              return {
                currentIndex :0,//当前所在图片下标
                timer:null,//定时轮询
                stara:'../../static/images/lstar.png',//亮星星
                star: [0, 1, 2, 3, 4],
                starb:'../../static/images/nlstar.png',//暗星星
                xing:0,
                imgArr:[
                  {	id:0,
                    url:"static/images/15.jpg",
                  },
                  {
                    id:1,
                    url:"static/images/23.png",
                  },
                  {
                    id:2,
                    url:"static/images/24.png",
                  },
                  {
                    id:3,
                    url:"static/images/16.jpg",
                  },
                  {
                    id:4,
                    url:"static/images/17.jpg",
                  },
                  {
                    id:5,
                    url:"static/images/12.jpg",
                  },
                  {
                    id:6,
                    url:"static/images/14.jpg",
                  },
                  {
                    id:7,
                    url:"static/images/13.jpg",
                  },
                ],
                list: [
                  {
                    src: 'static/images/12.jpg',
                    des: '小炒肉',
                    introduction: '小炒肉,主要食材是五花肉和青椒，主要烹饪工艺是炒,爆香味辣。',
                    score:4.9,
                    url:'https://baike.baidu.com/item/%E5%B0%8F%E7%82%92%E8%82%89/1073233'
                  },
                  {
                    src: 'static/images/14.jpg',
                    des: '酱板鸭',
                    introduction: '酱板鸭成品色泽深红，皮肉酥香，具有活血、顺气、美容之功效。',
                    score:4.9,
                    url:'https://baike.baidu.com/item/%E9%85%B1%E6%9D%BF%E9%B8%AD?fromModule=lemma_search-box'
                  },
                  {
                    src: 'static/images/13.jpg',
                    des: '小炒黄牛肉',
                    introduction: '小炒黄牛肉是以牛肉、青尖椒、红尖椒等食材制成的，香味浓郁。',
                    score:4.9,
                    url:'https://baike.baidu.com/item/%E5%B0%8F%E7%82%92%E9%BB%84%E7%89%9B%E8%82%89?fromModule=lemma_search-box'
                  },
                  {
                    src: 'static/images/18.jpg',
                    des: '干锅鲶鱼腊',
                    introduction: '干锅鲶鱼腊肉质细嫩、味鲜香辣，口味麻辣鲜香，汤少，味更足。',
                    score:4.8,
                    url:'https://baike.baidu.com/item/%E5%B9%B2%E9%94%85%E9%B2%B6%E9%B1%BC?fromModule=lemma_search-box'
                  }
                ],
              }
        },
      methods:{
        //开启定时器
        startInterval(){
          // 事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器
          clearInterval(this.timer);
          this.timer = setInterval(()=>{
            this.currentIndex++;
            if(this.currentIndex > this.imgArr.length-1){
              this.currentIndex = 0
            }
          },2000)
        },
        // 点击左右箭头
        clickIcon(val){
          if(val==='down'){
            this.currentIndex++;
            if(this.currentIndex===this.imgArr.length){
              this.currentIndex = 0;
            }
          }else{
            if(this.currentIndex === 0){
              this.currentIndex = this.imgArr.length;
            }
            this.currentIndex--;
          }
        },
        // 点击控制圆点
        changeImg(index){
          this.currentIndex = index
        },
        //鼠标移入移出控制
        changeInterval(val){
          if(val){
            clearInterval(this.timer)
          }else{
            this.startInterval()
          }
        },
        clickStars(i){
          this.xing = i+1
          console.log("点击了"+(i+1)+"颗星")
        }

      },
      //进入页面后启动定时轮询
      mounted(){
        this.startInterval()
      }

    }
</script>

<style scoped>
  #box ul{
    display: flex;
    flex-wrap: wrap;
  }
  #box li{
    padding: 3px;
    list-style: none;
    margin-right: 15px;
    border: 1px solid #eee;
    font-family: 华文楷体;
    font-size: 20px;
  }
  #box img{
    width: 292px;
    height: 150px;
  }

  th,tr
  {
    text-align:justify;
    height:50px;
    vertical-align: 50px;
    /*vertical-align:*/
    background-color: rgb(240, 233, 240);
    color:rgb(12, 11, 11);
  }

  * {
    padding: 0;
    margin: 0;
  }
  /* 清除li前面的圆点 */
  li {
    list-style-type: none;
  }
  .showImg{
    position: relative;
    width: 100%;
    height: 590px;
    margin: 40px auto;
    overflow: hidden;
  }
  /* 轮播图片 */
  .showImg img{
    width: 100%;
    height: 100%;
  }

  /* 箭头图标 */
  .iconDiv{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 1px solid #666;
    border-radius: 15px;
    background-color: rgba(125,125,125,.2);
    line-height: 30px;
    text-align: center;
    font-size: 25px;
    cursor: pointer;
  }
  .iconDiv:hover{
    background-color: white;
  }
  .icon-left{
    left: 10px;
  }
  .icon-right{
    right: 10px;
  }

  /* 控制圆点 */
  .banner-circle{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
  }
  .banner-circle ul{
    margin: 0 50px;
    height: 100%;
    text-align: right;
  }
  .banner-circle ul li{
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 5px;
    border-radius: 7px;
    background-color: rgba(125,125,125,.8);
    cursor: pointer;
  }
  .active{
    background-color: black !important;
  }

</style>
